<template>
  <div style="width: 100%;" v-loading="docLoading">
    <div class="document-right-header">
      <div class="document-right-header-left">
        <!-- <el-input size="medium" class="document-right-header-left-input" suffix-icon="el-icon-search" placeholder="搜索文档"
                  v-model="listQuery.name" @change="queryClick"></el-input> -->
        <el-select style="margin-left:20px" v-model="value" placeholder="请选择附件类型" @change="selectClick"
                   v-if="listQuery.docType == '00'">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-if="(listQuery.isUpdate == 1 || listQuery.isMyCreate ==1 || listQuery.deleted == 1)&&listQuery.docType != '05'"  @change="docSelectClick" style="margin-left:20px" v-model="listQuery.docType" placeholder="请选择文档类型">
          <el-option v-for="item in functionForm" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="document-right-header-right">
        <div class="document-right-header-right-switch">
          <div :class="[switchType == 'row'?'switch-bg':'']" class="document-right-header-right-switch-item"
               @click="loadSwitch('row')">
            <!-- <i :class="[switchType == 'row'?'':'switch-color']" class="iconfont icon-hang document-right-header-right-switch-item-title"></i> -->
            <span :class="[switchType == 'row'?'':'switch-color']"
                  class="document-right-header-right-switch-item-title">列</span>
          </div>
          <div :class="[switchType == 'column'?'switch-bg':'']" class="document-right-header-right-switch-itemTwo"
               @click="loadSwitch('column')">
            <!-- <i :class="[switchType == 'column'?'':'switch-color']" class="iconfont icon-lietu document-right-header-right-switch-item-title"></i> -->
            <span :class="[switchType == 'column'?'':'switch-color']"
                  class="document-right-header-right-switch-item-title">行</span>
          </div>
        </div>
        <el-button @click="addClick" style="margin-left: 20px;" type="primary"
                   v-if="promissionSave() && conteractType!='00' && dirType != '00'">{{ documentType == "合同" ? '新增合同': '新增文档' }}
        </el-button>
      </div>
    </div>
    <div style="position: relative;overflow-y: auto;margin-top: 24px;margin-bottom: 24px"
         :style="{height:curHeight+'px'}">
      <div class="document-right-content" v-if="switchType == 'row'">
        <row style="flex: 1;" @dirClick="dirClick" :documentType="documentType" :functionIndex="functionIndex"
             :data='documentForm' :listQuery="listQuery"></row>
      </div>
      <div class="document-right-content" v-if="switchType == 'column'">
        <div v-for="(item,index) in documentForm">
          <column class="document-right-content-column" @dirClick="dirClick" :documentType="documentType"
                  :functionIndex="functionIndex" :listQuery="listQuery" :item="item" :key="index">
          </column>
        </div>
        <div v-if="documentForm.length == 0" style="flex: 1;display: flex;justify-content: center;align-items: center;">
          <el-empty description="暂无数据"></el-empty>
        </div>
      </div>
    </div>
    <div>
      <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size"
                  @pagination="paginationList"/>
    </div>

    <!-- 新建文件夹 -->
    <folder ref="folder" @updateTree="updateTree"></folder>
  </div>
</template>

<script>
import Vue from "vue";
import folder from "./folder.vue";
import evclosure from "./evclosure.vue";
import column from "./column.vue";
import row from "./row.vue";
import singlefileUpload from "../../../../components/upload/singlefileUpload";
import {list} from "@/api/doc.js";
import {list as favorList} from "@/api/favor.js";
import pagination from "@/components/Pagination/index.vue";
import permissionFunc from "../../../../utils/permission";

export default {
  data() {
    return {
      conteractType: "05",
      switchType: "column",
      documentForm: [],
      listQuery: {
        current: 1,
        size: 20,
        docType: "",
        dirId: "",
        deleted: 0,
        isUpdate: 0,
        isMyCreate: 0,
        name: "",
        projDoc: '',
        projTaskDoc: ''
      },
      total: 0,
      functionIndex: 0,
      docLoading: false,
      curHeight: null,
      options: [
        {
          value: "projDoc",
          label: "项目附件",
        },
        {
          value: "projTaskDoc",
          label: "任务附件",
        },
      ],
      functionForm:[
        {
          value:'00',
          label:'项目文档'
        },
        {
          value:'06',
          label:'知识库'
        },
        {
          value:'04',
          label:'我的文档'
        },
        {
          value:'10',
          label:'会议纪要'
        },
      ],
      value: "projDoc",
      dirType:'00'
    };
  },
  components: {
    folder,
    evclosure,
    column,
    row,
    singlefileUpload,
    pagination,
  },
  props: ["documentType"],
  created() {
    this.paginationList();
    // 修改更新list列表
    this.$EventBus.$on("updateDoc", (data) => {
      var _this = this;
      console.log(data);
      console.log("我进来了");
      if (
          data.type == "del" ||
          data.type == "move" ||
          data.type == "removeIsMark" ||
          data.type == "recovery"
      ) {
        _this.documentForm.forEach(function (item, index) {
          if (item.docId == data.data.docId) {
            _this.documentForm.splice(index, 1);
            _this.$forceUpdate();
            console.log(_this.documentForm);
          }
        });
      } else if (data.type == "update") {
        _this.documentForm.forEach(function (item, index) {
          if (item.docId == data.data.docId) {
            _this.documentForm[index] = data.data;
            _this.$forceUpdate();
          }
        });
      } else if (data.type == "save") {
        _this.loadList();
      }
    });
  },
  beforeDestroy() {
    this.$EventBus.$off("updateDoc");
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  methods: {
    beforeMount() {
      var _this = this;
      window.onresize = () => {
        return (() => {
          var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
          this.curHeight = h - 250; //减去页面上固定高度height
        })();
      };
    },
    comeIn() {
      console.log("222");
      var h =
          document.documentElement.clientHeight ||
          document.body.clientHeight;
      this.curHeight = h - 250; //减去页面上固定高度height
    },
    promissionSave() {
      console.log('iosdfdwssdifsdhfjis ');
      console.log(this.listQuery);
      if (this.listQuery.docType == "04" || this.listQuery.docType == "06" || this.listQuery.docType == "10") {
        return permissionFunc.inserted(["doc:form:enclosure"]);
      } else if (this.listQuery.docType == "05") {
        return permissionFunc.inserted(["contract:form:save"]);
      } else {
        return false;
      }
    },
    paginationList() {
      var _this = this;
      if (_this.functionIndex == 2) {
        _this.favorList();
      } else {
        _this.loadList();
      }
    },
    // 刷新树
    updateTree(data) {
      console.log(data);
      this.$EventBus.$emit("eventName", data);
    },
    // 查询list
    loadList() {
      var _this = this;
      console.log(_this.listQuery);
      if (_this.documentType == '合同') {
        _this.listQuery.docType = '05'
      }
      if (_this.value == "projDoc") {
        _this.listQuery.projDoc = '';
        _this.$delete(_this.listQuery, "projTaskDoc");
      }
      if (_this.value == "projTaskDoc") {
        _this.listQuery.projTaskDoc = '';
        _this.$delete(_this.listQuery, "projDoc");
      }
      if (_this.listQuery.docType != '00' || !_this.listQuery.dirId) {
        _this.$delete(_this.listQuery, "projTaskDoc");
        _this.$delete(_this.listQuery, "projDoc");
      }
      if(!_this.listQuery.dirId){
        this.$delete(_this.listQuery,'dirId')
      }
      _this.docLoading = true;
      list(_this.listQuery, false)
          .then((res) => {
            console.log(res);
            if (res.data.docData.length > 0) {
              res.data.docData.forEach(function (item) {
                item.type = "doc";
              });
            }
            if (res.data.dirData.length > 0) {
              res.data.dirData.forEach(function (item) {
                item.type = "dir";
              });
            }
            _this.documentForm = res.data.dirData.concat(
                res.data.docData
            );
            _this.total = res.data.total;
            _this.docLoading = false;
            _this.$delete(this.listQuery, "docSubtype");
          })
          .catch((error) => {
            _this.docLoading = false;
          });
    },
    nodeChoosecatalogue(data) {
      console.log(data)
      console.log('项目合同')
      this.resetClick();
      this.conteractType = data.data.dirType
      this.dirType = data.data.dirType
      this.listQuery.docType = "05";
      this.listQuery.dirId = data.data.dirId;
      if(this.dirType=='00'){
      this.listQuery.docSubtype = 50;
      }
      this.loadList();
    },
    // 选择目录过滤
    nodeChoose(data) {
      console.log(data)
      console.log('项目合同')
      this.resetClick();
      this.conteractType = '05'
      this.listQuery.docType = data.data.dirType;
      this.dirType = data.data.dirType
      this.listQuery.dirId = data.data.dirId;
      if( this.dirType=='00'){
      this.listQuery.docSubtype = 50;
      }
      this.loadList();
    },
    // 回收站等方法
    fileFunction(data) {
      console.log(data);
      var _this = this;
      _this.resetClick();
      _this.listQuery.docType = '04'
      if (data == 0) {
        _this.listQuery.isUpdate = 1;
        _this.loadList();
      } else if (data == 1) {
        _this.listQuery.isMyCreate = 1;
        _this.loadList();
      } else if (data == 2) {
        _this.functionIndex = data;
        _this.favorList();
      } else if (data == 3) {
        _this.listQuery.deleted = 1;
        _this.loadList();
      }
    },

    // 收藏列表
    favorList() {
      var _this = this;
      var data = {
        current: _this.listQuery.current,
        size: _this.listQuery.size,
      };
      _this.docLoading = true;
      favorList(data, false)
          .then((res) => {
            console.log(res);
            if (res.data.data.records.length > 0) {
              res.data.data.records.forEach(function (item) {
                item.type = "doc";
              });
            }
            _this.documentForm = res.data.data.records;
            _this.total = res.data.data.total;
            _this.docLoading = false;
          })
          .catch((error) => {
            _this.docLoading = false;
          });
    },
    // 切换列表排列方式
    loadSwitch(data) {
      this.switchType = data;
    },
    loadFolder(data) {
      this.$refs.folder.loadFolder(data);
    },
    // 名字搜索
    queryClick(data) {
      console.log(data);
      this.resetClick();
      this.listQuery.name = data;
      this.loadList();
    },
    // 重置listquery
    resetClick() {
      // if (this.documentType == '合同') {
      //   this.listQuery.docType = '05'
      // } else {
      //
      // }
      this.listQuery.docType = "";
      this.functionIndex = 0;
      this.listQuery.deleted = 0;
      this.listQuery.isUpdate = 0;
      this.listQuery.isMyCreate = 0;
      this.listQuery.current = 1;
      this.listQuery.size = 20;
      this.listQuery.dirId = "";
      this.listQuery.name = "";
    },
    // 合同企业文档新增
    addClick() {
      var data = {
        docType: this.listQuery.docType,
        dirId: this.listQuery.dirId,
        conteractType: this.conteractType
      };
      if (this.documentType == "合同") {
        this.$router.push({
          path: "/contract/add",
          query: {data: JSON.stringify(data)},
        });
      } else {
        this.$router.push({
          path: "/document/add",
          query: {data: JSON.stringify(data)},
        });
      }
    },
    //  点击文件夹
    dirClick(data) {
      this.resetClick();
      this.listQuery.docType = data.dirType;
      this.dirType = data.dirType
      this.listQuery.dirId = data.dirId;
      this.loadList();
    },
    selectClick() {
      this.loadList();
    },
    docSelectClick(){
      this.loadList();
    }
  },
};
</script>

<style scoped>
.document-right-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.document-right-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.document-right-header-left-input {
  width: 220px;
}

.document-right-header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.document-right-header-right-switch {
  width: 72px;
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}

.document-right-header-right-switch-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dadee3;
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.document-right-header-right-switch-itemTwo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dadee3;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.switch-bg {
  background-color: #677e9f;
  border-color: #677e9f;
}

.switch-color {
  color: #677e9f !important;
}

.document-right-header-right-switch-item-title {
  font-size: 14px;
  color: white;
}

.document-right-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*margin-top: 20px;*/
}

.document-right-content-column {
  margin-bottom: 20px;
  margin-right: 20px;
}
</style>
